terrariafandomcom_ru-20200215-history
Участник:White Power Ranger/9999
Overview The Hawken wiki uses many advanced web functions and code in order to achieve the smooth and articulated design it currently uses. Raw HTML 5, CSS 3, and jQuery code can be found on almost every page. Due to this, the common wiki code used on most wikis is not as abundant here. Wiki code is simple and easy to use, which makes it great, yet terrible at the same time. If our entire wiki was just wiki code, there would be no image hover effects, popup windows, or dynamic page elements. That's why we use HTML 5, CSS 3, and jQuery. This page is a help page and reference sheet for those who want to learn how to edit these advanced parts of our wiki. A quick note: you'll see terms like "parent" and "children" thrown around in this guide. Parent means anything that contains the mentioned object. Children means anything that is inside the mentioned object. HTML 5 HTML 5 stands for Hyper Text Markup Language 5. It is the most recent version of the web markup code that web browsers use to gather and display website code. HTML uses elements to differentiate segments of code from one another. An HTML element is composed of a start tag, an end tag, and the content between the two. Each element is unique in the function that it is used for. All tags are enclosed in arrow brackets, with the element's content within its start and end tag. For example, a start tag would look like , and an end tag would look like . All put together, an HTML element would look something like this: Content 'The Paragraph Element' – The most common HTML tag on the wiki is , which defines the start of a paragraph of text. Text is placed within the start and end tags, like this: This is some text . Everytime you start a new paragraph of text, you would use a new set of tags. Example: Paragraph one Paragraph two. 'The Line Break Element' – Line break tags, , are also very common. They define an empty line, much like pressing enter in a word-processing program. They are unique in the fact that they are a single tag, and do not have a start or end tag. Line breaks are used to put space between paragraphs, to separate other HTML elements, and to bring elements down one line that would not do so normally. Due to the Wiki editor moving the typing cursor down two lines upon pressing enter instead of one, the tag can be used for single line returns, like so: Text More text. Interestingly enough, Wikia converts to , the XHTML line break element. and are the same thing. 'The Division Element' – Division tags are used to define a section of code different from the rest of the HTML. Division elements look like this: Content. Divs (as they are called) are often used with CSS for page formatting. For example, on the wiki mech pages, a div is used to section off the popup window for the Tips & Tactics box from the rest of the page. This allows us to individually show/hide the popup and show the rest of the page normally. You can also use divs to organize HTML code, which makes it easier to read. Other elements can be placed within a div, including other divs. A div is a block element, meaning that is has its own set of attributes that are different from the code around it. Text can be placed within in a div without the use of a paragraph element. More info on styling with divs in the CSS section. 'The Span Element' – Spans (pronounced literally like divs) are the inline equivalent of the element. This means that they inherit their attributes (such as color and formatting) from their parent element and everything inside of them runs together in one line. For example, in this code: This is some text and this is some more text, the span will inherit any attributes the paragraph element has, such as font size, color, etc. Spans are usually placed within other elements to make certain parts of the parent element stand out. Text can be placed within in a span without the use of a paragraph element. More info on styling with spans in the CSS section. 'Comments' – Comments are parts of a webpage's code that are not rendered by the browser. They allow for coders to explain parts of their code or mark certain parts to made it more readable and understandable. A typical comment would look like this: 'The Table Element Family' – , , and HTML tables consists of multiple tags in order to be formatted properly. The tag acts as a container, like a div. The tag defines a new table row, and the tag defines a table cell. All table family tags must have a start and end tag, and be nested properly. For example, a properly nested table would look like this: Content More content Tables are used for sharp formatting on the mech pages and popup windows. Tables are often formatted with CSS to modify cell spacing, margins, cell colors, and more. More info on table styling in the CSS section. 'Other Common HTML Tags' Many other tags like (links), (images), and are common in general HTML usage. Wikia prohibits the use of tags like these, instead replacing them with wikicode. Links in wikicode are done with LINK TEXT and images are IMAGE NAME. Iframes are not allowed at all. A special attribute called id can sometimes be found within HTML element start tags. This id attribute gives the affected element a name that allows other page functions to find it. This is used commonly in scripting and CSS functions. A typical id attribute may look like this: id="myName" CSS 3 CSS 3 stands for Cascading Style Sheets 3. CSS is used to format HTML elements, since built in HTML element formatting is not supported in HTML 5. Different segments of CSS code are called styles. Styles can include formatting, coloring, and even dynamic functions. Usually, CSS styles are stored in separate stylesheet files. Wiki doesn't use this method of CSS, instead it has one large stylesheet that contains all the styles for the wiki. Only admins can edit this stylesheet, however. This is where inline CSS comes in. In the start tag of an HTML element, the coder can add the style="" attribute to apply formatting to said element. For example, in this code: Text, the text within the paragraph is formatted to have a font size of 20px (about 14.5pt). All inline CSS goes within the style="" attribute. For example, this code: Text creates this: Text. Whenever you apply a style with inline CSS, the structure is as follows: the style name (e.g. color), a colon (:), then the value or type of style (e.g. #FFFFFF). Separate styles in CSS with semicolons (;). A completed example looks like this: color:#FFFFFF;font-size:20px. If the styling for an HTML element is in a stylesheet, the style is applied with the class="" attribute. For example, say we have a style by the name of MyStyle, and we want to apply it to a paragraph. Our code would look like this: Text. 'The Text Align Style' – text-align Text alignment is very important in webpage formatting. It is used to clip text to the left and right of its container, or float it to the center. The text-align style can be used to align any type of inline element (like a span), not just text. Typical use of text-align may look like this: Text being aligned. This text is being aligned left with CSS (text-align:left) This text is being centered with CSS (text-align:center) This text is being aligned right with CSS (text-align:right) Remember that with the text-align style, the content being aligned is the code/text within the element that has said text-align style. The element must also be inline. See how to apply the inline style to an element in the display section. 'The Color Style' – color In web design, colors are represented by name and hexadecimal number (hex value). For example, "black" is literally black, and its hex value is #000000. Hex values are 6 digit codes for colors that use the hexadecimal numerical system. A single hex letter can range from A to F, or 0 to 9. In colors, hex numbers are put in pairs of two, with three pairs total for the red, green, and blue (RGB) values in a color. In the color "white", the R, G, and B values are all the max: 255. In hexadecimal, 255 is FF. After putting all three pairs of FF together, the hex color value for white is #FFFFFF. All hex color values are preceded by a "#" to identify them as a parsable number. When you apply your color styling to an element, the attribute should look something like this: Content. W3Schools has created a very useful color picker that gives you a color's hex value for use in HTML/CSS. Examples: Red text is #FF0000 Green text is #00FF00 Blue text is #0000FF 'The Background Color Style' – background-color Whereas color is used to set the color of elements inside a parent element, background-color is used to create a backdrop for the parent element itself. This can be used to highlight text, like this: Highlighted text. Result: Highlighted text. 'The Height & Width Styles' – height and width In HTML 4.01, height and width attributes could be directly applied to an element as attributes. HTML 5 does not support this, so sizing must be done with CSS. Height and width styles work exactly as one would infer: they set the vertical and horizontal size of an element. In the following example, CSS is used with HTML to create a 50px square: . Result: You can also use percentages to set height and width. When a percentage is used, the percentage is out of the parent element. In the following example, the rectangle shown is 50% of the page's width and 10px tall: . Result: 'The Vertical Align Style' – vertical-align Vertical alignment is just as important as horizontal alignment by text-align. For example, the following code: Top Middle Bottom creates a table with three cells that each have their own vertical alignment. Result: Top Middle Bottom Just like with text-align, vertical-align aligns the content within the element that has said vertical-align style. 'The Display Style' - display Display styling is used to change how an element interacts with other elements around it. There are four common types of display: inline - makes the element and its children behave like a span, everything runs together in the same line and sometimes inherits attributes from its parent block - makes the element and its children behave like a div, it gets its own set of lines apart from other elements and sometimes does not inherit attributes from its parent inline-block - makes the element behave like a span, but its children will behave like a div none - makes the element not show up or affect the layout Set elements to inline when you want them to follow the flow and design of their parent. Set elements to block when you want them to be individual pieces of the website that are not connected to other things (this is great for popups). Set elements to inline-block when you want them to be aligned with text-align, but maintain div-like behavior. 'The Margin Style Family' – margin, margin-top, margin-bottom, margin-left, and margin-right Margins are spacing placed at the very outermost edge of an element they are applied to. Pixels are the most common unit of measure for margins. There are five types of margins: 1) margin - sets a margin on all sides of an element 2) margin-top - sets a margin on the top of an element 3) margin-bottom - sets a margin on the bottom of an element 4) margin-left - sets a margin on the left of an element 5) margin-right - sets a margin on the right of an element In this example, there is a ten pixel margin to the right of the first block that separates it from the second one: 'The Padding Style Family' – padding, padding-top, padding-bottom, padding-left, and padding-right Padding is a lot like margin in the sense that it puts space around an element, but padding includes the element's background color. There are five types of padding: 1) padding - applies padding to all sides of an element 2) padding-top - applies padding to the top of an element 3) padding-bottom - applies padding to the bottom of an element 4) padding-left - applies padding to the left of an element 5) padding-right - applies padding to the right of an element Padding is used to make elements look smoother and have spacing with color. In this example, there is a box without padding, and a box with padding: I don't have padding I have 10px padding 'The Outline Style' – outline Outlines are styled lines drawn around the very outermost edge of an element. They ignore margins and go directly around their element. Their construction follows this setup: 1) the color, 2) the style, 3) the weight (thickness). A space is placed between all three components. A completed outline style might look like this: outline:#FFFFFF solid 5px For example, the following code: creates this: 'The Border Style' – border Borders are styled lines drawn around the very innermost edge of an element. They are contained within margins. Their construction follows this setup: 1) the color, 2) the style, 3) the weight (thickness). A space is placed between all three components. A completed border style might look like this: border:#FFFFFF solid 5px For example, the following code: creates this: 'The Cursor Style' – cursor Using CSS, you can change what cursor is displayed when the mouse is touching a certain element. Listing of common cursors: auto default none help pointer progress wait crosshair text move not-allowed n-resize e-resize cell alias jQuery JQuery is a JavaScript library for modern web browsers. MediaWiki uses jQuery instead of vanilla JavaScript (JS) for Java web functions. Standard JavaScript can, however, be implemented into wiki pages through the use of the element. Typically, JS is used for small Java functions in web pages, which is ideal for wiki pages. Unfortunately, several important JS functions are disabled by Wikia, making it unusable in certain situations. For example, onClick and HTML elements that lead to JS are nullified. Those functions in jQuery are not blocked, so for situations where clicking on non-wiki links is required, one would use jQuery. We currently only use jQuery for onClick events and for modifying CSS display styles to show/hide page elements. This can be seen in the popup windows on the mech pages. All of the existing custom jQuery code is located in the wiki's Common.js file, which can only be edited by admin. Verbatim tags are also admin-only tools, so any requests to insert jQuery or JS code into a wiki page must be sent to an active admin. 'The Click Listener Function' – $('A').click(function (B) {C}); "Event listeners" are parts of scripts that wait, or "listen", for something to happen. A click listener waits for the user to click the element that has the listener attached to it. This is used on the mech pages for popup windows - when the user clicks one of the buttons that opens a popup, the code within the click listener is executed. The structure of a click listener can be seen within this section's heading, with A representing the HTML element to receive the listener, B representing any arguments that are passed from the page to the script (this is usually blank), and C representing the code that executes when the click occurs. For example, this is what a segment of the mech pages' popup code looks like: $('#show').click(function () { var $popup = $('#popup'), display = $popup.css('display'); $popup.css('display', 'block'); var $fade = $('#fade'), display = $fade.css('display'); $fade.css('display', 'block'); }); Other Code Any page code that is not HTML, CSS, or jQuery should be placed here. 'Wikicode: Verbatims' - Verbatims are code that are forcefully injected into wiki pages where they would be nullified otherwise. This is important for adding JavaScript and CSS stylesheets. For example, a JS function was needed on a page, a verbatim would be created at MediaWiki:NAME. It would then be applied to the page by placing a verbatim element at the very top of the page, like this: NewFunction. Verbatims can also be used to add CSS styles globally to pages. This is useful for when a certain style appears frequently within the page. Only admins can make verbatims, however, but any user can add an existing one to a page. Author's Note Whew. You've just finished reading the whole thing, all ~3000 words. Relish in that achievement. Now that you're done relishing, we'll move on to other matters. In case I forgot something in this reference page, feel free to add it yourself! If you're unable to do so for any reason, send me a message and I'll add myself. Just remember, it has to be something that is used on the wiki. We don't need a section explaining HTML metadata or JS syntax since none of that is relevant to us. If you still need help with editing a page, just send me a message and get back to you as soon as I can. Anyways, I hope this reference page will help you on your quest to edit our wiki :D --TiberiumFusion (talk) 20:32, June 14, 2014 (UTC)TiberiumFusion